<template>
  <!-- <div class="box" :style="{backgroundImage: 'url(' + data.img + ')'}">
    {{data.title}}
  </div> -->
  <div class="box">
    {{ data.bgStr }}
    <div class="title">{{ data.title }}</div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 1180px;
  height: 72px;
  background-size: cover;
  text-align: center;
  font-weight: 600;
  margin: 0 auto;
  font-size: 72px;
  font-family: Helvetica;
  color: #F9F9F9;
  line-height: 72px;
  text-align: center;
  position: relative;
  .title {
    width: 1180px;
    padding-top: 40px;
    height: 32px;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #272727;
    line-height: 32px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>